<template>
    <div class="contextmenu" :style="{ left: cmDataX + 'px', top: cmDataY + 'px' }">
        <div v-if="showId == 2">
            <div v-for="item in contexTmenuItem" :key="item.id" v-show="item.id > showId">
                <div class="contextmenuItemsD" v-if="item.separate"></div>
                <div class="contextmenuItems" v-else @click="item.click"><i class="menuIcons" :class="item.icon" v-if="item.icon"></i>{{ item.name }}</div>
            </div>
        </div>
        <div v-else-if="showId == 16">
            <div v-for="item in contexTmenuItem" :key="item.id" v-show="item.id <= showId">
                <div class="contextmenuItemsD" v-if="item.separate"></div>
                <div class="contextmenuItems" v-else @click="item.click"><i class="menuIcons" :class="item.icon" v-if="item.icon"></i>{{ item.name }}</div>
            </div>
        </div>
        <div v-else>
            <div v-for="item in contexTmenuItem" :key="item.id">
                <div class="contextmenuItemsD" v-if="item.separate"></div>
                <div v-else>
                    <div v-if="rightClickNodeLevel < 2">
                        <div class="contextmenuItems" v-if="item.id < 19 || item.id == 24" v-show="item.id != 5" @click="item.click">
                            <i class="menuIcons" :class="item.icon" v-if="item.icon"></i>{{ item.name }}
                        </div>
                    </div>
                    <div v-else>
                        <div class="contextmenuItems" @click="item.click" v-show="item.id != 5"><i class="menuIcons" :class="item.icon" v-if="item.icon"></i>{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <el-dialog
          title="批量风格"
          :visible.sync="dialogVisible"
          width="45%"
          :modal-append-to-body='false'
          :before-close="handleClose"
          class="dialog">
            <el-tabs v-model="activeName" type="" @tab-click="handleClick" class="tabs">
              <el-tab-pane label="点及文字" name="first" style="color:#fff">
                <formTemplate :data="formData" :postData="postData" :optionData="optionData">
                    <template slot="image">
                        <el-form-item label="绘标样式：" :label-width="'100px'" style="margin-bottom:-1px">
		        			<img @click="menuShow" :src="postData.image" alt="" style="width:50px; height:50px; margin-left:8px">
		        		</el-form-item>	
		        	</template>
                </formTemplate>
              </el-tab-pane>
              <el-tab-pane label="线　　　" name="second">
                  <formTemplate :data="formData" :postData="postData"></formTemplate>
              </el-tab-pane>
              <el-tab-pane label="面　　　" name="third">
                  <formTemplate :data="formData" :postData="postData"></formTemplate>
              </el-tab-pane>
            </el-tabs>
          
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" >确 定</el-button>
          </span>
          <div style="clear:both"></div>
        </el-dialog> -->
        <menuIcon v-show="menuIconIsShow" url="http://59.110.54.18/file/mapIcon/nongji1.png" @imageUrl="imageUrl"></menuIcon>
    </div>
</template>
<script>
import contextMenu from './utils/contextMenu.config'
import formTemplate from './formTemplate.vue'
import menuIcon from '@/components/tool/editor/components/menuIcon.vue'
import editorware from '../utils/editorMiddleware'
export default {
    name: 'contextMenu',
    components: {
        formTemplate,
        menuIcon
    },
    data() {
        return {
            contexTmenuItem: '',
            dialogVisible: false,
            activeName: 'first',
            formData: [],
            postData: {
                image: 'http://59.110.54.18/file/mapIcon/nongji1.png'
            },
            optionData: {
                font_family: [
                    { label: '微软雅黑', value: '微软雅黑' },
                    { label: '宋体', value: '宋体' },
                    { label: '楷体', value: '楷体' },
                    { label: '隶书', value: '隶书' },
                    { label: '黑体', value: '黑体' }
                ]
            },
            showId: 0,
            rightClickNodeLevel: 2
        }
    },
    computed: {
        menuIconIsShow() {
            return this.$store.state.menuIcon
        },
        cmDataX() {
            return this.$store.state.contextMenu.X
        },
        cmDataY() {
            return this.$store.state.contextMenu.Y
        },
        cmDataT1() {
            return this.$store.state.contextMenu.type1
        },
        cmDataT2() {
            return this.$store.state.contextMenu.type2
        },
        isDialog() {
            return this.$store.state.dialogVisible
        }
    },
    watch: {
        cmDataT1(newData) {
            this.setMenuOptions()
        },
        cmDataT2(newData) {
            this.setMenuOptions()
        },
        isDialog(newData) {
            if (newData == true) {
                this.dialogVisible = true
                console.log('000')
            }
        }
    },
    mounted() {
        this.formData = contextMenu.formData.dot
    },
    methods: {
        imageUrl(data) {
            this.postData.image = data.iconUrl
            this.postData.specification = data.specifications
        },
        menuShow() {
            if (this.$store.state.menuIcon) {
                this.$store.state.menuIcon = false
            } else {
                this.$store.state.menuIcon = true
            }
        },
        handleClose() {
            this.dialogVisible = false
            this.$store.state.dialogVisible = false
        },
        handleClick(tab, event) {
            if (tab.index == 0) {
                this.formData = contextMenu.formData.dot
            } else if (tab.index == 1) {
                this.formData = contextMenu.formData.line
            } else if (tab.index == 2) {
                this.formData = contextMenu.formData.cover
            }
        },
        setMenuOptions() {
            // console.log(this.cmDataT1, this.cmDataT2)
            this.rightClickNodeLevel = editorware.rightClickNode.level
            if (this.cmDataT1 && this.cmDataT2) {
                this.contexTmenuItem = contextMenu[this.cmDataT1][this.cmDataT2]
            }
            if ((editorware.treeSelectNode && editorware.treeSelectNode.data.type == 'tif') || (editorware.treeSelectNode && editorware.treeSelectNode.data.type == 'tile')) {
                this.showId = 2
            } else {
                this.showId = 0
            }
            // else if (editorware.treeSelectNode && editorware.treeSelectNode.data.name == '种植资源') {
            //     if (this.cmDataT2 == 'unlock') {
            //         this.showId = 0
            //     } else {
            //         this.showId = 16
            //     }
            // } else {
            //     this.showId = 0
            // }

            // console.log(editorware.treeSelectNode)
        }
    }
}
</script>
<style lang="scss" scoped>
.contextmenu {
    border: 1px solid #dedede;
    padding: 5px 10px;
    position: fixed;
    background: #ffffff;
    z-index: 1100;
    border-radius: 2px;
    .contextmenuItems {
        line-height: 32px;
        width: 120px;
        cursor: pointer;
        position: relative;
        padding: 0 5px;
        &:hover {
            color: #ffffff;
            background: rgba(32, 160, 255, 0.5);
        }
        .menuIcons {
            margin-right: 10px;
        }
    }
    .contextmenuItemsD {
        margin: 5px 0;
        height: 1px;
        background: #dedede;
    }
}
</style>
<style>
.tabs .el-tabs__item {
    color: #ffffff;
}
.tabs .is-active {
    color: rgba(32, 160, 255);
}
/* 弹框 */
.el-dialog {
    background: rgba(30, 36, 50, 0.6);
    border: 1px solid rgba(32, 160, 255, 0.3);
}
.el-dialog__title {
    color: #fff;
}
.dialog .el-form-item__label {
    color: #fff;
}
.el-message-box.inputFolder {
    background: rgba(30, 36, 50, 0.6);
    border-color: rgba(32, 160, 255, 0.3);
}
.el-message-box.inputFolder > .el-message-box__header > .el-message-box__title,
.el-message-box.inputFolder > .el-message-box__header > .el-message-box__headerbtn > .el-message-box__close.el-icon-close,
.el-message-box.inputFolder .el-message-box__message {
    color: #ffffff;
}
.el-message-box.inputFolder .el-input__inner {
    background: none;
    color: #ffffff;
    border-color: rgba(32, 160, 255, 0.5);
}
.el-message-box__wrapper > .el-message-box {
    background: rgba(30, 36, 50, 0.6);
    border-color: rgba(32, 160, 255, 0.3);
}
.el-message-box__wrapper > .el-message-box .el-message-box__headerbtn .el-message-box__close.el-icon-close,
.el-message-box__wrapper > .el-message-box .el-message-box__message {
    color: #ffffff;
}
</style>
